<template>
  <div class="filter-tags">
    <el-check-tag
      v-for="tag in tagList"
      :key="tag.value"
      :checked="selectedTags.includes(tag.value)"
      @change="toggleTag(tag.value)"
    >
      {{ tag.label }}
    </el-check-tag>
  </div>
</template>
<script setup>
const emit = defineEmits(["changeTag"]);
const props = defineProps({
  // 默认单选，可以多选
  isMultiple: {
    type: Boolean,
    default: false,
  },
  // 默认选中
  defaultTags: {
    type: Array,
    default: () => [],
  },
  tagList: {
    type: Array,
    default: () => [
      {
        value: "1",
        label: "Tag 1",
      },
      {
        value: "2",
        label: "Tag 2",
      },
    ],
  },
});
const selectedTags = ref([]);
const toggleTag = (value) => {
  // 如果是多选，则选中
  if (props.isMultiple) {
    selectedTags.value = selectedTags.value.includes(value)
      ? selectedTags.value.filter((tag) => tag !== value)
      : [...selectedTags.value, value];
  } else {
    selectedTags.value = [value];
  }
  emit("changeTag", selectedTags.value);
};
watch(
  props.defaultTags,
  (newVal) => {
    selectedTags.value = newVal;
    emit("changeTag", selectedTags.value);
  },
  {
    immediate: true,
  }
);
</script>
<style scoped>
.filter-tags {
  display: flex;
  gap: 10px;
}
</style>
